import i18n from "@/locales/i18n";
import useStore from "@/store/configStore"; // 确保路径正确
import { TranslationOutlined } from "@ant-design/icons";
import { Dropdown, Flex, Typography } from "antd";
import { memo } from "react";

const { Text } = Typography;

const items = [
  { key: "cn", label: "简体中文" },
  { key: "hk", label: "繁體中文" },
  { key: "en", label: "English" },
];

interface TextColorProps {
  textColor?: string;
}

const SwitchLanguage = (props: TextColorProps) => {
  const textColor = props.textColor || "#fff";
  const { lang, setLanguage } = useStore();
  const langLabel = items.find((item) => item.key === lang)?.label;

  return (
    <Dropdown
      arrow
      placement="bottomRight"
      menu={{
        items,
        selectable: true,
        defaultSelectedKeys: [lang],
        onClick: (e: any) => {
          const { key } = e;
          setLanguage(key);
          i18n.changeLanguage(key);
        },
      }}
    >
      <Flex style={{ userSelect: "none" }}>
        <TranslationOutlined style={{ fontSize: 18, margin: "0 8px" }} />
        <Text style={{ color: textColor }}>{langLabel}</Text>
      </Flex>
    </Dropdown>
  );
};

export default memo(SwitchLanguage);
